<template>
	<div class="container">
		<div class="content">
			<el-icon size="40px" class="icon"><Tickets /></el-icon>
			<h1 class="mb-4">Cycle Reviews</h1>
		</div>
		<el-table class="table" ref="tableRef" row-key="date" :data="tableData">
			<el-table-column
				prop="date"
				label="ID"
				sortable
				width="180"
				column-key="date"
				:filters="[
					{ text: '2016-05-01', value: '2016-05-01' },
					{ text: '2016-05-02', value: '2016-05-02' },
					{ text: '2016-05-03', value: '2016-05-03' },
					{ text: '2016-05-04', value: '2016-05-04' },
				]"
				:filter-method="filterHandler"
			/>
			<el-table-column prop="name" label="Name" width="180" />
			<el-table-column prop="address" label="Address" :formatter="formatter" />

			<el-table-column
				prop="tag"
				label="Tag"
				width="100"
				:filters="[
					{ text: 'Home', value: 'Home' },
					{ text: 'Office', value: 'Office' },
				]"
				:filter-method="filterTag"
				filter-placement="bottom-end"
			>
				<template #default="scope">
					<el-tag
						:type="scope.row.tag === 'Home' ? '' : 'success'"
						disable-transitions
						>{{ scope.row.tag }}</el-tag
					>
				</template>
			</el-table-column>
		</el-table>
		<div class="content">
			<el-icon size="30px" color="blue" class="icon"><Monitor /></el-icon>
			<h3 class="mb-4 mapLink" @click="toCal">Go to the Cost Calculator</h3>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTable, type TableColumnCtx } from "element-plus";
import router from "../router";

interface User {
	date: string;
	name: string;
	address: string;
	tag: string;
}

const toCal = () => {
	router.push("/Calculator");
};

const tableRef = ref<InstanceType<typeof ElTable>>();

const resetDateFilter = () => {
	tableRef.value!.clearFilter(["date"]);
};
// TODO: improvement typing when refactor table
const clearFilter = () => {
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-expect-error
	tableRef.value!.clearFilter();
};
const formatter = (row: User, column: TableColumnCtx<User>) => {
	return row.address;
};
const filterTag = (value: string, row: User) => {
	return row.tag === value;
};
const filterHandler = (
	value: string,
	row: User,
	column: TableColumnCtx<User>
) => {
	const property = column["property"];
	return row[property] === value;
};

const tableData: User[] = [
	{
		date: "6666",
		name: "Tom",
		address: "Shenzhen",
		tag: "Copper",
	},
	{
		date: "666",
		name: "Tomm",
		address: "Shanghai",
		tag: "Silver",
	},
	{
		date: "66",
		name: "Tommm",
		address: "Beijing",
		tag: "Gold",
	},
	{
		date: "6",
		name: "Tommmm",
		address: "Hongkong",
		tag: "Gold",
	},
	{
		date: "66",
		name: "Tommmmm",
		address: "Guangdong",
		tag: "Gold",
	},
	{
		date: "666",
		name: "Tommmmmm",
		address: "London",
		tag: "Gold",
	},
	{
		date: "6666",
		name: "Tommmmmmm",
		address: "Los Angles",
		tag: "Gold",
	},
	{
		date: "6666",
		name: "Tommmmmmmm",
		address: "New York",
		tag: "Gold",
	},
];
</script>

<style scoped>
.container {
	width: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.table {
	margin: 20px;
	width: 90%;
}

.icon {
	margin-left: 15px;
}

.mapLink {
	color: blue;
	cursor: pointer;
}

.mb-4 {
	margin-left: 20px;
	justify-content: center;
	align-items: center;
}

div {
	border-radius: 5px;
}
</style>
